<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0px;
				padding: 0px;
			}
			.box{
				width: 500px;
				margin: 0px auto;
			}
			.box div{
				width: 500px;
				height: 600px;
			}
			
			.top{
				background: deepskyblue;
			}
			.one{
				background: yellow;
			}
			
			.two{
				background: blue;
			}
			.three{
				background: aqua;
			}
			.four{
				background: red;
			}
			.five{
				background: green;
			}
			.six{
				background: deeppink;
			}
			.seven{
				background: orangered;
			}
			.eight{
				background: orchid;
			}
			.nine{
				background: chocolate;
			}
			.bottom{
				background: darkgoldenrod;
			}
			.lou{
				width: 50px;
				height: 450px;
				position: fixed;
				top: 50px;
				left: 50px;
			}
			.lou a{
				display: block;
				width: 50px;
				height: 49px;
				border-bottom: 1px solid gainsboro;
				background: gray;
				text-align: center;
				text-decoration: none;
				color: #fff;
				line-height: 50px;
			}
			.active{
				background: #ff6700 !important;
			}
		</style>
		<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function(){
//				设置滚动条的高度
				$('html,body').animate({'scrollTop':'1000'},2000)
//					或取整个楼层的数组长度
					var len = $('.floor').length;
//				设置滚动条事件
				$(document).scroll(function(){
//					获得滚动条的高度
					var Stop = $(document).scrollTop();
//					获得第九楼距离文档顶部的距离
//					var nTop = $('.floor').eq(len-1).offset().top;
//					循环所有的楼层
					$('.floor').each(function(){
//						获取当前元素序号
						var num = $(this).index('.floor');
//						获取当前元素距离文档顶部的距离
						var nowT = $(this).offset().top;
						if(num>=7){
							num=7
						}
//						获取当前元素的下一个元素距离文档顶部的距离
						var nextT=$('.floor').eq(num+1).offset().top;
						
						if(Stop>=nowT&&Stop<=nextT){
//							console.log(num)
							$('.lou a').eq(num).addClass('active').siblings().removeClass('active')
						}
					})
//					获得最后一层距离文档顶部的距离
					var nTop= $('.floor').eq(len-1).offset().top;
					if(nTop<=Stop){
						$('.lou a').eq(len-1).addClass('active').siblings().removeClass('active')
					}
				})
				
			})
		</script>
	</head>
	<body>
		<div class="lou">
			<a class="active" href="javascript:;">一楼</a>
			<a href="javascript:;">二楼</a>
			<a href="javascript:;">三楼</a>
			<a href="javascript:;">四楼</a>
			<a href="javascript:;">五楼</a>
			<a href="javascript:;">六楼</a>
			<a href="javascript:;">七楼</a>
			<a href="javascript:;">八楼</a>
			<a href="javascript:;">九楼</a>
		</div>
		<div class="box">
			<div class="top">
				
			</div>
			
			<div class="one">
				<h2 class="floor">一楼</h2>
			</div>
			
			<div class="two">
				<h2 class="floor">二楼</h2>
			</div>
			
			<div class="three">
				<h2 class="floor">三楼</h2>
			</div>
			
			<div class="four">
				<h2 class="floor">四楼</h2>
			</div>
		
			<div class="five">
				<h2 class="floor">五楼</h2>
			</div>
			
			<div class="six">
				<h2 class="floor">六楼</h2>
			</div>
			
			<div class="seven">
				<h2 class="floor">七楼</h2>
			</div>
			
			<div class="eight">
				<h2 class="floor">八楼</h2>
			</div>
			
			<div class="nine">
				<h2 class="floor">九楼</h2>
			</div>
			
			<div class="bottom">
				
			</div>
		</div>
	</body>
</html>
